<!--
 * 环形进度组件封装
 * @Author: John Trump
 * @Date: 2020-07-15 14:29:13
 * @LastEditors: John Trump
 * @LastEditTime: 2020-07-15 14:48:26
 * @FilePath: /src/components/CircularProgress.vue
-->

<template>
  <div class="circular-progress-wrapper" :style="cssVars">
    <mu-circular-progress
      mode="determinate"
      class="inner"
      :value="percent"
      :stroke-width="stokeWidth"
      :size="300"
    />
    <mu-circular-progress
      class="outer"
      mode="determinate"
      :value="100"
      :stroke-width="stokeWidth"
      :size="300"
    />
    <div class="context">
      <div class="data">
        {{ data }}
      </div>
      <div class="unit">
        {{ unit }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CircularProgress",
  props: {
    /** 显示的内容 */
    data: {
      type: String,
      default: "0"
    },
    /** 单位 */
    unit: {
      type: String,
      default: "千卡"
    },
    /** 圆圈的宽度 */
    stokeWidth: {
      type: Number,
      default: 35
    },
    /** 比例 */
    percent: {
      type: Number,
      default: 0,
      validator: function(value) {
        return value >= 0;
      }
    },
    color: {
      type: String,
      default: '#33cb98'
    }
  },
  computed: {
    // TODO: 如果后续需求需要根据Percentage来改变圆形环的颜色的话, 可以参考Wave组件的处理, 这里就不写这个逻辑了, ref => `/src/components/Wave.vue`
    cssVars() {
      return {
        '--bgcolor': this.color
      }
    }
  }
};
</script>

<style lang="less" scoped>
/** 环形进度组件封装 */
.circular-progress-wrapper {
  position: relative;
  .inner {
    /deep/ .mu-circular-progress-determinate-path {
      stroke: var(--bgcolor);
      // stroke: #ff8a79;
    }
  }
  .outer {
    position: absolute;
    left: 0px;
    /deep/ .mu-circular-progress-determinate-path {
      stroke: #e1e7f5;
    }
    z-index: -1;
  }

  .context {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
    .unit {
      font-size: 34px;
    }
  }

  /deep/ .mu-circular-progress-determinate {
    transform: rotate(-90deg);
  }
}
</style>
